<!--
*  功能描述：项目信息
 -->
<template>
    <div>
        
    <el-tag style="width: 100%; text-align: left; font-size: 20px"
      >查询项目信息</el-tag
    >
        <el-form :inline="true" :model="server" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="server.ProjectName" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item label="合同关联">
          <el-select v-model="server.ProjectConId" clearable placeholder="合同关联">
            <el-option
              v-for="item in data"
              :key="item.ContractId"
              :value="item.ContractId"
              :label="item.ContractName"
              >{{ item.ContractName }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">查询</el-button>
          <el-button type="primary" @click="GetContractExcel" style="background-color:red">导出excel</el-button>
        </el-form-item>
      </el-form>
    
    <el-tag style="width: 100%; text-align: left; font-size: 20px"
      >项目信息列表</el-tag
    >
<div>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="ProjectId"
      label="序号">
    </el-table-column>
    <el-table-column
      prop="DName"
      label="甲方负责人">
    </el-table-column>
    <el-table-column
      prop="ProjectName"
      label="项目名称">
    </el-table-column>
    <el-table-column
      prop="ProjectBuildtype"
      label="建筑类别">
    </el-table-column>
    <el-table-column
      prop="CName"
      label="合同信息">
    </el-table-column>
    <el-table-column
      prop="ProjectPrice"
      label="合同额（万元）">
    </el-table-column>
    <el-table-column
      prop="ProjectStartTime"
      label="开始日期">
    </el-table-column>
    <el-table-column
      prop="ProjectEndTime"
      label="结束日期">
    </el-table-column>
    <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="ck(scope.row.ProjectId)" type="text" size="small"
                >查看</el-button
              >
              <el-button
                type="text"
                @click="handleClick(scope.row.ProjectId)"
                size="small"
                >编辑</el-button
              >
            </template>
          </el-table-column>
  </el-table>
  <el-pagination style="text-align: center;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[8,15,20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
    </div>
<div>
      <el-dialog title="查看项目信息" :visible.sync="dialogVisible1">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称" prop="ProjectName">
                <el-input
                  v-model="ruleForm.ProjectName"
                  style="width: 220px"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理级别" prop="ProjectLevel">
                <el-radio-group disabled v-model="ruleForm.ProjectLevel">
                  <el-radio label="院管"></el-radio>
                  <el-radio label="所管"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="建筑类别" prop="ProjectBuildtype">
                <el-select disabled v-model="ruleForm.ProjectBuildtype" placeholder="请选择">
                  <el-option label="特级" value="特级"></el-option>
                  <el-option label="一级" value="一级"></el-option>
                  <el-option label="二级" value="二级"></el-option>
                  <el-option label="三级" value="三级"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同额(万元)" prop="ProjectPrice">
                <el-input
                  type="number"
                  v-model="ruleForm.ProjectPrice"
                  style="width: 220px"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建设规模" prop="ProjectScale">
                <el-input
                disabled
                  type="number"
                  v-model="ruleForm.ProjectScale"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间">
                <el-date-picker
                disabled
                  v-model="ruleForm.ProjectStartTime"
                  type="date"
                  placeholder="选择日期"
                  style="float: left"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间">
                <el-date-picker
                disabled
                  v-model="ruleForm.ProjectEndTime"
                  type="date"
                  placeholder="选择日期"
                  style="float: left"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="电话" prop="ProjectPhone">
                <el-input
                disabled
                  v-model="ruleForm.ProjectPhone"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="承接部门" prop="ProjectDeptId">
                <el-select disabled v-model="ruleForm.ProjectDeptId" placeholder="请选择">
                  <el-option
                    v-for="item in deptdata"
                    :key="item.DepId"
                    :value="item.DepId"
                    :label="item.DepName"
                    >{{ item.DepName }}</el-option
                  ></el-select
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="甲方联系人" prop="ProjectRid">
                <el-select disabled v-model="ruleForm.ProjectRid" placeholder="请选择">
                  <el-option
                    v-for="item in Re"
                    :key="item.PersonId"
                    :value="item.PersonId"
                    :label="item.PersonNmae"
                    >{{ item.PersonNmae }}</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同关联" prop="ProjectConId">
                <el-select disabled v-model="ruleForm.ProjectConId" placeholder="请选择">
                  <el-option
                    v-for="item in data"
                    :key="item.ContractId"
                    :value="item.ContractId"
                    :label="item.ContractName"
                    >{{ item.ContractName }}</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            
            <el-button @click="dialogVisible1=false">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
       <div>
      <el-dialog title="修改项目信息" :visible.sync="dialogVisible" custom-class="custom" >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="text-align: left"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称" prop="ProjectName">
                <el-input
                  v-model="ruleForm.ProjectName"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理级别" prop="ProjectLevel">
                <el-radio-group v-model="ruleForm.ProjectLevel">
                  <el-radio label="院管"></el-radio>
                  <el-radio label="所管"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="建筑类别" prop="ProjectBuildtype">
                <el-select v-model="ruleForm.ProjectBuildtype" placeholder="请选择">
                  <el-option label="特级" value="特级"></el-option>
                  <el-option label="一级" value="一级"></el-option>
                  <el-option label="二级" value="二级"></el-option>
                  <el-option label="三级" value="三级"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同额(万元)" prop="ProjectPrice">
                <el-input
                  type="number"
                  v-model="ruleForm.ProjectPrice"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建设规模" prop="ProjectScale">
                <el-input
                  type="number"
                  v-model="ruleForm.ProjectScale"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="ruleForm.ProjectStartTime"
                  type="date"
                  placeholder="选择日期"
                  style="float: left"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间">
                <el-date-picker
                  v-model="ruleForm.ProjectEndTime"
                  type="date"
                  placeholder="选择日期"
                  style="float: left"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="电话" prop="ProjectPhone">
                <el-input
                  v-model="ruleForm.ProjectPhone"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="承接部门" prop="ProjectDeptId">
                <el-select v-model="ruleForm.ProjectDeptId" placeholder="请选择">
                  <el-option
                    v-for="item in deptdata"
                    :key="item.DepId"
                    :value="item.DepId"
                    :label="item.DepName"
                    >{{ item.DepName }}</el-option
                  ></el-select
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="甲方联系人" prop="ProjectRid">
                <el-select v-model="ruleForm.ProjectRid" placeholder="请选择">
                  <el-option
                    v-for="item in Re"
                    :key="item.PersonId"
                    :value="item.PersonId"
                    :label="item.PersonNmae"
                    >{{ item.PersonNmae }}</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同关联" prop="ProjectConId">
                <el-select v-model="ruleForm.ProjectConId" placeholder="请选择">
                  <el-option
                    v-for="item in data"
                    :key="item.ContractId"
                    :value="item.ContractId"
                    :label="item.ContractName"
                    >{{ item.ContractName }}</el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
<el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="UptPro('ruleForm')"
                >修改</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
    </div>
</template>

<script>
export default{
    data(){
        return{
      tableData: [],
      dataxl: [],
      deptdata: [],
      Re:[],
      data: [],
            pageindex:1,
            pagesize:8,
            totalCount:0,
            server: {
        ProjectName: "",
        ProjectConId:"",
      },
      dialogVisible: false,
      dialogVisible1: false,
      rid: 0,
      ruleForm: {
        ProjectName: "",
        ProjectLevel: "",
        ProjectBuildtype: "",
        ProjectStage: [],
        ProjectPrice: "",
        ProjectScale: "",
        ProjectStartTime: "",
        ProjectEndTime: "",
        ProjectPhone: "",
        ProjectDeptId: "",
        ProjectRid: "",
        ProjectConId: "",
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        level: [
          { required: true, message: "请选择管理级别", trigger: "change" },
        ],
        buildType: [
          { required: true, message: "请选择建设类型", trigger: "change" },
        ],

        price: [{ required: true, message: "请输入合同额", trigger: "blur" }],
        scale: [{ required: true, message: "请输入建设规模", trigger: "blur" }],
        startTime: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        endTime: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        phone: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
        deptID: [
          { required: true, message: "请选择建设部门", trigger: "change" },
        ],
        rId: [
          { required: true, message: "请输入甲方联系人ID", trigger: "blur" },
        ],
        conId: [
          { required: true, message: "请选择关联合同", trigger: "change" },
        ],
      },
        }
    },
    created(){
        this.show();
        this.Xl() ;
        this.onsubmit();
        this.DeptXl();
    this.Res();
    },
    methods:{
      ck(ProjectId) {
      this.dialogVisible1 = true;
      this.rid = ProjectId;
      this.FindPro();
    },
    handleClick(ProjectId) {
      this.dialogVisible = true;
      this.rid = ProjectId;
      this.FindPro();
    },
        onsubmit(){
            this.show();
        },
        handleSizeChange(val) {
        this.pagesize =val;
        this.show();
      },
      handleCurrentChange(val) {
        this.pageindex=val;
        this.show();
      },
      GetContractExcel() {
        window.open("Operation/GetContractExcel")
    },
      FindPro() {
      this.$http({
        url: "Operation/FindPro",
        method: "Get",
        params: {
          ProjectId: this.rid,
        },
      }).then((res) => {
        this.ruleForm = res.data;
      });
    },
    UptPro(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.ProjectStage = this.ruleForm.ProjectStage.toString();

          this.$http({
            url: "Operation/UptPro",
            method: "Put",
            data: this.ruleForm,
          }).then((res) => {
            if (res.data > 0) {
              console.log(res.data);
              this.$message.success("项目编辑成功");
              this.dialogVisible = false;
              location.reload();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
        show(){
            this.$http({
        url: "Operation/ShowProject",
        method: "Get",
        params: {
          pageindex: this.pageindex,
          pagesize: this.pagesize,
          ProjectName:this.server.ProjectName,
          ProjectConId:this.server.ProjectConId,
        },
      }).then((res) => {
        (this.tableData = res.data.Data),
          (this.totalCount = res.data.totalCount);
      });
        },
        DeptXl() {
      this.$http({
        url: "Operation/GetDept",
        method: "get",
      }).then((res) => {
        this.deptdata = res.data;
        console.log(this.data);
      });
    },
    //时间转换
    dateFormat(fmt, date) {
      let ret = "";
      date = new Date(date);
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
  
    Res(){
      this.$http({
        url: "Operation/ShowReponsble",
        method: "get",
      }).then((res) => {
        this.Re = res.data;
        console.log(this.data);
      });
    },
        Xl() {
      this.$http({
        url: "Operation/SelCon",
        method: "Get",
      }).then((res) => {
        this.data = res.data;
        console.log(this.data);
      });
    },
    
    
    }
    
}
</script>